<template>
  <div class="table-pagination">
    <el-pagination
      v-model:currentPage="changeCurrentPage"
      v-model:page-size="changePageSize"
      :total="(pages as Pages).total"
      :background="background"
      small
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 15, 20, 50, 100, 150]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { Pages } from '@/typings/pages'

const props = withDefaults(defineProps<{
  pages: Pages,
  background?: boolean
}>(), {
  background: false
})
const { pages } = toRefs(props)

const emits = defineEmits(['handle', 'update:pages'])

const changeCurrentPage = computed({
  get (): number {
    return pages.value.pageNum
  },
  set (val) {
    pages.value.pageNum = Number(val)
  }
})
const changePageSize = computed({
  get (): number {
    return pages.value.pageSize
  },
  set (val) {
    pages.value.pageSize = Number(val)
  }
})

function handleSizeChange () {
  emits('handle')
}
function handleCurrentChange () {
  emits('handle')
}
</script>

<style lang="scss" scoped>
::v-deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
  --el-pagination-button-disabled-bg-color: transparent;
}
.table-pagination{
  padding: 16px 0 8px;
}
</style>
